<template>
  <div class="col-start-start text-[14px] border-bottom text-[#444] w-full py-[10px]">
    <div class="row-start-center">
      <div class="item-title">用户名</div>
      <div class="item-nav">{{ item.Name }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">昵称</div>
      <div class="item-nav">{{ item.Nickname || "--" }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">备注</div>
      <div class="item-nav">{{ item.Note || "--" }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">时间</div>
      <div class="item-nav">{{ formatDate(item.EndTime) }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">游戏</div>
      <div class="item-nav">{{ item.LotteryName }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">回水类型</div>
      <div
        class="item-nav"
        :class="{
          'text-primary': item.Type === 0,
          'text-red': item.Type === 1
        }"
      >
        {{ item.Type === 1 ? "自助回水" : "后台回水" }}
      </div>
    </div>
    <div class="row-start-center">
      <div class="item-title">回水金额</div>
      <div class="item-nav">{{ item.Coin }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">回水流水</div>
      <div class="item-nav">{{ item.BetAmount }}</div>
    </div>
    <div class="row-start-center">
      <div class="item-title">抽佣比例</div>
      <div class="item-nav">{{ item.BackRate / 100 }}%</div>
    </div>
    <div
      class="w-full box-border grid grid-cols-2 gap-x-[10px] pt-[10px] px-[15px]"
      v-if="isBack == '0'"
    >
      <div>
        <van-button block type="danger" size="small" @click="handleAction(2)">一键拒绝</van-button>
      </div>
      <div>
        <van-button block type="primary" size="small" @click="handleAction(1)">一键通过</van-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reqUserBackWaterGrant, reqUserBackWaterReject } from "@/api/backwater";
import { usePremsStore } from "@/store/modules/prems";
import { formatDate } from "@/utils/common";
import { toast } from "@/utils/toast";

const props = withDefaults(
  defineProps<{
    item: ReportRebateDetailMo;
    uid: number;
    isBack?: "0" | "1";
  }>(),
  {}
);

const emit = defineEmits(["update"]);
const premsStore = usePremsStore();

// 发放/拒绝
const handleAction = (type: 1 | 2 = 1) => {
  if (!premsStore.isEditBackwaterSetting) {
    toast.info("暂无权限");
    return;
  }
  let text = type == 1 ? "通过" : "拒绝";
  // 弹框操作
  showConfirmDialog({
    message: `是否进行【${text}】操作`,
    className: "confirm-dialog",
    beforeClose: async (action: string) => {
      return new Promise<boolean>(async resolve => {
        if (action === "confirm") {
          try {
            if (type == 1) {
              await reqUserBackWaterGrant({
                Id: props.item.Id,
                UserId: props.uid
              });
            } else {
              await reqUserBackWaterReject({
                Id: props.item.Id,
                UserId: props.uid
              });
            }
            emit("update");
            resolve(true);
          } catch (error) {
            resolve(true);
          }
        } else {
          resolve(true);
        }
      });
    }
  });
};
</script>

<style scoped>
.item-title {
  @apply ml-[14px] w-[80px] my-[4px] text-[#555];
}
</style>
